<template>
  <view class="goods_wrap">
    <scroll-view scroll-y class="goods_page">
      <div class="swiper-container">
        <u-swiper :list="banner" :border-radius="0" :height="750"></u-swiper>
      </div>
      <!-- 限时抢购和拼团 -->
      <view v-if="list.goodsStatus == 2" class="border-radus-card bg-fff">
        <div v-if="list.goodsStatus == 2" class="time-limit row cont-center border-radus-top">
          <image src="../../static/img/time_limit._bg.png" class="active_img border-radus-top"></image>
          <div class="pd_l_30 flex-1" style="z-index: 1">
            <div v-if="list.goodsStatus == 2" class="font-36 col-fff font-b">¥<span class="font-60">{{activityGoodsStandards.discountsPrice}}</span></div>
            <div v-if="list.goodsStatus == 3" class="font-36 col-fff font-b">¥<span class="font-60">{{activityGoodsStandards.groupPrice}}</span></div>
            <div class="row cont-center" style="z-index: 1">
              <div class="font-20 col-fff bg-FF6251 pd_l_10 pd_r_10">原价</div>
              <div class="font-20 col-FF8B37 bg-fff pd_l_10 pd_r_10" style="margin-right: 10upx;">¥{{activityGoodsStandards.price}}</div>
            </div>
          </div>
          <div class="pd_r_20" style="z-index: 1;">
            <div class="row cont-center pd_b_20" style="z-index: 1;">
              <div class="font-30 font-b col-FF6251 pd_r_10">限时抢购</div>
              <div class="font-24 col-FF8B37">活动倒计时</div>
            </div>
            <div class="font-20 col-fff" style="z-index: 1;">倒计时{{timeText}}</div>
          </div>
        </div>
        <div class="font-32 font-b u-p-l-36 u-p-t-18 u-p-b-18">{{list.goodsName}}</div>
      </view>
      <view v-if="list.goodsStatus == 3" class="border-radus-card bg-fff">
        <div v-if="list.goodsStatus == 3" class="time-limit row cont-center border-radus-top">
          <image src="../../static/img/time_limit._bg.png" class="active_img border-radus-top"></image>
          <div class="pd_l_30 flex-1" style="z-index: 1;">
            <div class="font-36 col-fff font-b">¥<span class="font-60">{{activityGoodsStandards.groupPrice}}</span></div>

            <div class="row cont-center" style="z-index: 1;">
              <div class="font-20 col-fff bg-FF6251 pd_l_10 pd_r_10">原价</div>
              <div class="font-20 col-FF8B37 bg-fff pd_l_10 pd_r_10" style="margin-right: 10upx;">¥{{activityGoodsStandards.price}}</div>
              <div class="font-20 col-fff bg-FF6251 pd_l_10 pd_r_10">拼团优惠价</div>
            </div>
          </div>
          <div class="pd_r_10" style="z-index: 1;">
            <div class="row jright pd_b_20" style="z-index: 1">
              <div class="text-style"><img src="../../static/img/pt_text.png" /></div>
            </div>
            <div class="spell font-20 col-fff text-cent">邀请多人参与购买 最高可返{{topReturnMoney}}111元</div>
          </div>
        </div>
        <div class="font-32 font-b u-p-l-36 u-p-t-18 u-p-b-18">{{list.goodsName}}</div>
      </view>
      <!--标题-->
      <div class="bg-fff u-p-20 border-radus-card" v-if="list.goodsStatus == 1">
        <div class="font-36 font-b col-1f476d pd_b_10" style="color: #245482">¥<span class="font-60">{{list.standards[0].price}}</span></div>
        <!-- <div v-if="list.goodsStatus == 1" class="font-36 font-b col-1f476d pd_b_10">¥<span class="font-60">{{price}}</span><span v-if="smallNumShow"></span></div> -->
        <div class="font-32 font-b">{{list.goodsName}}</div>
      </div>

      <!--评价-->
      <div class="bg-fff u-p-20 mg_t_10 border-radus-card" style="padding-left: 0!important;">
        <view class="u-flex u-m-b-40 u-row-between">
          <view class="u-font-32 font-b color-333 u-p-l-30">商品评价</view>
          <navigator :url="`/pages/comment/list?id=${list.id}&type=goods`" class="color-active u-font-28 u-flex u-center">
            <view style="color: #245482">查看全部</view>
            <u-icon :name="require('../../static/icon/arrow-right.png')" size="28" class="u-m-l-10"></u-icon>
          </navigator>
        </view>
        <evaList :list="evaLists" type="goods" @like-change="res => evaLists = res"></evaList>
      </div>
      <!--商品详情-->
      <div class="bg-fff u-p-l-20 pd_r_20 mg_t_10 pd_t_50 col-666 border-radus-card">
        <view class="u-font-32 font-b u-m-b-20 color-333">商品详情</view>
        <u-parse :html="list.goodsContent"></u-parse>
      </div>

    </scroll-view>
    <!--正常购买规格弹窗-->
    <u-popup v-model="popupShow" mode="bottom" border-radius="16">
      <div class="popup-container bg-fff pd_t_50 pd_b_45">
        <div class="row cont-center yh_bd_bottom pd_b_30">
          <div class="left-img">
            <img v-for="(item,index) in banner" :key="index" v-if="index==0" :src="item" />
          </div>
          <div class="pd_l_30">
            <div class="font-28 font-b col-333 pd_b_30">{{list.goodsName}}</div>
            <div class="font-24 col-999 pd_b_45">规格：{{list.standards[currentSort].desc}}</div>
            <div class="font-28 font-b col-1f476d">￥{{list.standards[currentSort].price}}</div>
          </div>
        </div>
        <div class="font-28 col-666 pd_t_30">规格</div>
        <div class="row cont-center pd_t_30 pd_b_70 u-flex-wrap">
          <div v-for="(item,index) in list.standards" :key="index" class="specs font-24 col-333 text-cent bg-F5F5F5 mg_r_20"
               :class="{'active':currentSort == index}" @click="active(index)">
            <span>{{item.desc}}</span>
          </div>
        </div>
        <div style="width: 100% !important;" class="user-btn text-cent col-fff font-26 bg-1f476d">
          <u-button type="primary" :custom-style="customStyle" shape="circle" @click="openWindow(list, list.standards[currentSort])">立即开团</u-button>
        </div>
      </div>
    </u-popup>
    <!--活动购买弹窗-->
    <u-popup v-model="activityPopupShow" mode="bottom" border-radius="16">
      <div class="popup-container bg-fff pd_t_50 pd_b_45">
        <div class="row cont-center yh_bd_bottom pd_b_30">
          <div class="left-img">
            <img v-for="(item,index) in banner" :key="index" v-if="index==0" :src="item" />
          </div>
          <div class="pd_l_30">
            <div class="font-28 font-b col-333 pd_b_30">{{list.goodsName}}</div>
            <div class="font-24 col-999 pd_b_45">规格：{{activityList.activityGoodsStandards[currentSort].desc}}</div>
            <div class="font-28 font-b col-1f476d">￥{{activityList.activityGoodsStandards[currentSort].groupPrice}}</div>
           <!-- <div class="font-24 col-999 pd_b_45">规格：{{activityList.activityGoodsStandards[currentSort].desc}}</div>
            <div v-if="list.goodsStatus == 2 && list.panicBuyDiscountModel == 2" class="font-28 font-b col-1f476d">￥{{activityList.activityGoodsStandards[currentSort].discountsPrice}}</div>
            <div v-if="list.goodsStatus == 2 && list.panicBuyDiscountModel == 1" class="font-28 font-b col-1f476d">￥{{activityList.activityGoodsStandards[currentSort].fixedPrice}}</div>
            <div v-if="list.goodsStatus != 2" class="font-28 font-b col-1f476d">￥{{activityList.activityGoodsStandards[currentSort].price}}</div>-->
          </div>
        </div>
        <div class="font-28 col-666 pd_t_30">规格</div>
        <div class="row cont-center pd_t_30 pd_b_70 u-flex-wrap">
          <div v-for="(item,index) in activityList.activityGoodsStandards" :key="index" class="specs font-24 col-333 text-cent bg-F5F5F5 mg_r_20" :class="{'active':currentSort == index}" @click="active(index)">
            <span>{{item.desc}}</span>
          </div>
        </div>
        <div style="width: 100% !important;" class="user-btn text-cent col-fff font-26 bg-1f476d">
          <u-button type="primary" :custom-style="customStyle" shape="circle" @click="openWindow(list, activityList.activityGoodsStandards[currentSort])">立即购买</u-button>
        </div>
      </div>
    </u-popup>
    <!--购买协议-->
    <u-popup v-model="agreementPopupShow" mode="bottom" border-radius="16">
      <div class="popup-container bg-fff pd_t_50 pd_b_45" style="height: 770upx">
        <div class="font-28 font-b pd_b_45 text-cent">购买协议</div>
        <div style="overflow: scroll;height: 530upx;" class="font-26 col-666 pd_b_70">
          <u-parse :html="list.goodsAgreement"></u-parse>
        </div>
        <div class="confirm-btn text-cent col-fff font-26 bg-1f476d">
          <u-button type="primary" :custom-style="customStyle" shape="circle" @click="agreementPopupHide">确定</u-button>
        </div>
      </div>
    </u-popup>

    <!--拼团规则-->
    <u-popup v-model="spellShow" mode="bottom" border-radius="16">
      <div class="popup-container bg-fff pd_t_50 pd_b_45" style="height: 7.7rem;">
        <div class="font-28 font-b pd_b_45 text-cent">拼团规则</div>
        <div style="overflow: scroll;height: 530upx;" class="font-26 col-666 pd_b_70">
          <u-parse :html="activityList.groupBuyDesc"></u-parse>
        </div>
        <div class="confirm-btn text-cent col-fff font-26 bg-1f476d">
          <u-button type="primary" :custom-style="customStyle" shape="circle" @click="spellPopupHide">确定</u-button>
        </div>
      </div>
    </u-popup>

    <!--底部按钮-->
    <div class="bg-fff btn-container pd_t_19 pd_b_20 row cont-center">
      <navigator url="/pages/user/adviser?title=1" class="o_btn">
        <u-icon name="account" size="40" color="#1f476d"></u-icon>
        <view class="font-24 color-666">测评顾问</view>
      </navigator>
      <view class="flex-1">
        <div v-if="list.goodsStatus == 1" class="user-btn text-cent col-fff font-30 bg-1f476d">
          <u-button type="primary" :custom-style="customStyle" shape="circle" @click="popup">立即购买</u-button>
        </div>
        <div v-if="list.goodsStatus == 2 || list.goodsStatus == 3" class="user-btn text-cent col-fff font-30 bg-1f476d">
          <u-button type="primary" :custom-style="customStyle" shape="circle" @click="activityPopup">立即购买</u-button>
        </div>
      </view>
    </div>
  </view>
</template>

<script>
  import {request} from "../../util/api";
  import evaList from "../../components/evaList";

  export default {
    components: {
      evaList
    },
    data() {
      return {
        customStyle: {
          background: '#1f476d',
          padding: '0 30rpx',
          color: '#fff'
        },
        banner: [],
				activityGoodsStandards: {},
				list: {},
				activityList: {},
				popupShow: false,
				agreementPopupShow: false,
				spellShow: false,
				activityPopupShow: false,
				currentSort: 0,
				timeText: '',
				topReturnMoney: '',
        userId: '',
        orderId: '',
        evaLists: []
      }
    },

    onLoad(option) {
      this.userId = option.userId
      this.orderId = option.orderId


    },

    onShow() {
      // 获取评论数据
      this.getDetail(this.goodsId)
    },

    methods: {
      getDetail(id=20) {
        var that_ = this;
        request({
          url: '/app/goods/goodsDetail?id=' + id
        }).then(ret => {
          var goodsCover = ret.data.goodsCovers
          that_.list = ret.data
          that_.evaLists = ret.data.goodsEvaList
          that_.banner = goodsCover
          if (that_.list.activityId) {
            that_.getDetailActivity(that_.list.activityId)
          }
        })
      },

      getDetailActivity(id) {
        var that_ = this;
        request({
          url: '/app/goods/timeLimitBuy',
          data: {
            activityId: id
          }
        }).then(ret => {
          if (ret.data) {
              that_.activityList = ret.data;
              that_.activityGoodsStandards = ret.data.activityGoodsStandards[0];
              that_.topReturnMoney = ret.data.topReturnMoney;
              that_.timeOut(ret.data.activityStart,ret.data.activityEnd);
            } else{
              that_.list.goodsStatus = '1';
            }
        })
      },

      timeOut(start,now) {
					var that_ = this;
					var nowtime = new Date(now);
					if (nowtime < new Date()) {
						that_.timeText = 0;
						return false;
					}
					setInterval(function() {
						var starttime = new Date();
						var time = nowtime - starttime;
						var day = parseInt(time / 1000 / 60 / 60 / 24);
						var hour = parseInt(time / 1000 / 60 / 60 % 24);
						var minute = parseInt(time / 1000 / 60 % 60);
						var seconds = parseInt(time / 1000 % 60);
						that_.timeText = day + "天" + hour + "小时" + minute + "分钟" + seconds + "秒"
					}, 1000);
				},

      popup() {
        this.popupShow = true;
      },
      popupHide() {
        this.popupShow = false;
      },
      agreementPopup() {
        this.agreementPopupShow = true;
      },
      spellPopup() {
        this.spellShow = true;
      },
      activityPopup() {
        this.activityPopupShow = true;
      },

      active(index, val) {
        this.currentSort = index;
      },

      openWindow(list,current) {
        setTimeout(() => {
          uni.$emit('new_order', {
            list: list,
            current: current,
            title: '1',
            userId: this.userId,
            orderId: this.orderId
          })
        }, 300)

        this.$u.route({
          url: '/pages/goods/share_new_order'
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .border-radus-top {
    border-radius: 28upx 28upx 0 0;
  }
  .border-radus-card {
    border-radius: 28upx;
    width: 95%;
    margin: 30upx auto;
  }
  .bg-F5F5F5 {
    background: #f5f5f5;
  }
  .pd_b_70 {
    padding-bottom: 70upx;
  }
  .goods_wrap {
    display: flex;
    flex-direction: column;
    height: 100%;

    .specs {
      min-width: 224upx;
      height: 60upx;
      line-height: 60upx;
      margin-bottom: 10upx;
      padding-left: 10rpx;
      padding-right: 10rpx;
    }
    .active {
      background: #FFF7F5 !important;
      color: #2A6AAA !important;
      border: 1px solid #2A6AAA;
    }

    .popup-container {
      width: 100%;
      padding-left: 5%;
      padding-right: 5%;
    }
    .left-img {
      width: 180upx;
      height: 180upx;
    }

    .left-img image {
      width: 100%;
      height: 100%;
    }
  }
  .goods_page {
    background: #f7f7f7;
    flex: 1;
    padding-bottom: 120upx;
  }
  .btn-container {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding-left: 30upx;
    padding-right: 30upx;
    box-shadow: 1px 8px 16px 0px rgba(0, 0, 0, 0.47);
    .o_btn {
      width: 180upx;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
    }
  }
  .time-limit {
    width: 100%;
    height: 136upx;
    position: relative;
  }
  .text-style {
    width: 132upx;
    height: 28upx;
    image {
      width: 100%;
      height: 100%;
    }
  }
  .count-down1 {
    font-size: 12px;
    width: 302upx;
    height: 36upx;
    line-height: 36upx;
    /* padding: 0.05rem 0.15rem; */
    background-color: #F3B880;
    border-radius: 18upx;
  }
  .active_img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
  }
  .spell{
    min-width: 320upx;
    height: 36upx;
    line-height: 36upx;
    background-color: #FE642C;
    border-radius: 18upx;
  }
</style>
